<template>
	<view id="barter-detail">
		<view class="content-box">
			<view class="content-header">
				<view class="carousel">
					<swiper indicator-dots circular=true duration="400" v-if="goodDetail&& goodDetail.goods.galleryList && goodDetail.goods.galleryList.length > 0">
						<swiper-item class="swiper-item" v-for="(item,index) in goodDetail.goods.galleryList" :key="index">
							<view class="image-wrapper">
								<image :src="item" class="loaded" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
					<block v-else>
						<image :src="goodDetail.goods.goodsImg" class="image-wrapper" mode="aspectFill"></image>
					</block>
				</view>
				<view class="detail-text">
					<h5>{{goodDetail.goods.goodsName}}</h5>
					<view class="text-price">价值：￥{{goodDetail.goods.shopPrice || 0}}</view>
					<view class="text-num">0人与物换物</view>
				</view>
			</view>
			<view class="margin-bg"></view>
			<view class="detail-txt">
				<view class="d-header">
					<text>图文详情</text>
				</view>
				<rich-text class="richtext" :nodes="goodsDesc"></rich-text>
			</view>
			
			<view class="content-footer">
				<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
					<text class="yticon icon-xiatubiao--copy"></text>
					<text>首页</text>
				</navigator>
				<view class="add-btn" @click="toRoute('/pages/barter/apply')">上传物品审核</view>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bannerimgs: [
				{goodsImg: 'http://www-test.chainlife1688.com//public/diy_view/style2/img/adv1.png'},
				{goodsImg: 'http://www-test.chainlife1688.com//public/diy_view/style2/img/adv1.png'},
			],
			cid: '',
			goodDetail: {
				goods: {}
			},
			goodsDesc: '',
		};
	},
	onLoad(e) {
		console.log(e)
		this.cid = e.cid;
		this.getDetail()
	},
	components: {

	},
	onShow() {

	},
	methods: {
		// 跳转路由
		toRoute(url){
			uni.navigateTo({
				url: `${url}?cid=${this.cid}`
			})
		},
		// 获取详情
		getDetail(){
			this.$Request.request('/api/goods/detail','get',{
				goodsId: this.cid,
			}).then(res=>{
				if(res.status == 1){
					this.goodDetail = res.data;
					// .replace(/\<img\s/gi,
						// '<img style="max-width:100%;height:auto;display: block;" ')
					this.goodsDesc = this.goodDetail.goods.goodsDesc;
				}else {
					this.$api.msg(res.msg)
				}
			})
		},
	}
};
</script>

<style scoped lang="scss">
	.content-header {
		.carousel {
			height: 722upx;
			position:relative;
			swiper{
				height: 100%;
			}
			.image-wrapper{
				width: 100%;
				height: 100%;
			}
			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				height: 750upx;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.detail-text {
			width: 100%;
			background: #fff;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			h5 {
				font-size: 32rpx;
				color: #303133;
				line-height: 50rpx;
			}
			.text-price {
				padding: 10rpx 0px;
				font-size: 30rpx;
				color: #fa436a;
			}
			.text-num {
				font-size: 26rpx;
				color: #909399;
				line-height: 50rpx;
			}
		}
	}
	
	.margin-bg {
		width: 100%;
		height: 20rpx;
		background: #F5F5F5;
	}
	
	.detail-txt {
		width: 100%;
		.d-header{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;
				
			text{
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}
			&:after{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc; 
			}
		}
		
	}
	
	.content-footer {
		position:fixed;
		left: 30upx;
		bottom:30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255,255,255,.9);
		box-shadow: 0 0 20upx 0 rgba(0,0,0,.5);
		border-radius: 16upx;
		.p-b-btn{
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;
			.yticon{
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}
			&.active, &.active .yticon{
				color: $uni-color-primary;
			}
			.icon-fenxiang2{
				font-size: 42upx;
				transform: translateY(-2upx);
			}
			.icon-shoucang{
				font-size: 46upx;
			}
		}
		
		.add-btn {
			background: #EE486C;
			width: 376rpx;
			height: 76rpx;
			border-radius: 37rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
	}
	
</style>
